@w-collapse: ~'w-collapse';


.@{w-collapse}{
  background-color: #f7f7f7;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  &> &-item{
    border-bottom: 1px solid #d9d9d9;
  }
  &-header{
    line-height: 22px;
    padding: 8px 0 8px 10px;
    color: rgba(0,0,0,.85);
    cursor: pointer;
    position: relative;
    transition: all .3s;
    & > i[class^="w-icon"]:first-child{
      margin-right: 6px;
      transform: scale(.75) rotate(-90deg);
      transition: transform .24s;
    }
  }
  &-active &-header{
    & > i[class^="w-icon"]:first-child{
      transform: scale(.75) rotate(0);
    }
  }
  &-conten{
    overflow: hidden;
    color: rgba(0,0,0,.65);
    padding: 0 16px;
    background-color: #fff;
    &:before,&:after{
      content: "";
      display: inline-block;
      height: 10px;
    }
    &:before{
      border-top: 1px solid #d9d9d9;
    }
  }
  &-disabled &-header{
    cursor: not-allowed;
    color: rgba(0,0,0,.25);
    background-color: #f7f7f7;
  }
  &.no-border {
    border:0;
    background: transparent;
  }
  &.no-border & {
    &-item{
      border:0;
    }
    &-header{
      border-bottom: 1px solid #d9d9d9;
    }
  }
}
